<template>
  <div class="analysis">
    <div class="real-time">
      <div class="head-title">实时数据</div>
      <a-row :gutter="30" class="content">
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
          <div class="wrapper hits m-b-30">
            <div class="sub-title">
              <img class="image" src="~@/assets/lianan/djl.png" alt="">
              <span class="text">点击量</span>
            </div>
            <div class="number">
              <vue-count-up :start-value="0" :end-value="86416416"/>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
          <div class="wrapper order m-b-30">
            <div class="sub-title">
              <img class="image" src="~@/assets/lianan/ddl.png" alt="">
              <span class="text">今日订单量（件）</span>
            </div>
            <div class="number">
              <vue-count-up :end-value="56131231"/>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8">
          <div class="wrapper deal m-b-30">
            <div class="sub-title">
              <img class="image" src="~@/assets/lianan/cjl.png" alt="">
              <span class="text">今日成交量（美元）</span>
            </div>
            <div class="number">
              <vue-count-up :end-value="41563111.00"/>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="transaction-statistics">
      <a-card :bordered="false">
        <div slot="title" class="card-sub-title">成交统计</div>
        <a class="card-sub-title-wrapper" slot="extra" href="#">
          <span class="day">今日</span>
          <span class="week">本周</span>
          <span class="month">本月</span>
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              2023年<a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item key="0">2022年</a-menu-item>
              <a-menu-item key="1">2021年</a-menu-item>
              <a-menu-item key="3">2020年</a-menu-item>
            </a-menu>
          </a-dropdown>
        </a>
        <echarts-view ref="line" :options="option"></echarts-view>
      </a-card>
    </div>
    <div class="order-proportion">
      <a-row :gutter="30">
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="10">
          <a-card class="card-no-border m-t-30" :bordered="false">
            <div slot="title" class="card-sub-title">订单占比</div>
            <a class="card-sub-title-wrapper" slot="extra" href="#">
              <a-dropdown :trigger="['click']">
                <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                  2023年<a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item key="0">2022年</a-menu-item>
                  <a-menu-item key="1">2021年</a-menu-item>
                  <a-menu-item key="3">2020年</a-menu-item>
                </a-menu>
              </a-dropdown>
            </a>
            <echarts-view ref="order" :options="ordwerOption" theme="walden"></echarts-view>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="14">
          <a-card class="card-no-border m-t-30" :bordered="false">
            <div slot="title" class="card-sub-title">通知公告</div>
            <ul class="message-list">
              <li class="item">
                <span class="tag activity">活动</span>
                <span class="text">
                  最新优惠活动即将开始，开始期待吧！最新优惠活动即将开始，开始期待吧！
                </span>
                <span class="time">2024-01-10</span>
              </li>
              <li class="item">
                <span class="tag message">消息</span>
                <span class="text">
                  你都申请尚未通过，请重新填写后.你都申请尚未通过，请重新填写后.
                </span>
                <span class="time">2024-01-10</span>
              </li>
              <li class="item">
                <span class="tag notice">通知</span>
                <span class="text">
                  关于2023年公司新版规章制度，关于2023年公司新版规章制度，..
                </span>
                <span class="time">2024-01-10</span>
              </li>
              <li class="item">
                <span class="tag activity">活动</span>
                <span class="text">
                  最新优惠活动即将开始，开始期待吧！最新优惠活动即将开始，开始期待吧！
                </span>
                <span class="time">2024-01-10</span>
              </li>
              <li class="item">
                <span class="tag message">消息</span>
                <span class="text">
                  你都申请尚未通过，请重新填写后.你都申请尚未通过，请重新填写后.
                </span>
                <span class="time">2024-01-10</span>
              </li>
              <li class="item">
                <span class="tag notice">通知</span>
                <span class="text">
                  关于2023年公司新版规章制度，关于2023年公司新版规章制度，..
                </span>
                <span class="time">2024-01-10</span>
              </li>
              <li class="item">
                <span class="tag activity">活动</span>
                <span class="text">
                  最新优惠活动即将开始，开始期待吧！最新优惠活动即将开始，开始期待吧！
                </span>
                <span class="time">2024-01-10</span>
              </li>
              <li class="item">
                <span class="tag message">消息</span>
                <span class="text">
                  你都申请尚未通过，请重新填写后.你都申请尚未通过，请重新填写后.
                </span>
                <span class="time">2024-01-10</span>
              </li>
              <li class="item">
                <span class="tag notice">通知</span>
                <span class="text">
                  关于2023年公司新版规章制度，关于2023年公司新版规章制度，..
                </span>
                <span class="time">2024-01-10</span>
              </li>
              <li class="item">
                <span class="tag activity">活动</span>
                <span class="text">
                  最新优惠活动即将开始，开始期待吧！最新优惠活动即将开始，开始期待吧！
                </span>
                <span class="time">2024-01-10</span>
              </li>
              <li class="item">
                <span class="tag message">消息</span>
                <span class="text">
                  你都申请尚未通过，请重新填写后.你都申请尚未通过，请重新填写后.
                </span>
                <span class="time">2024-01-10</span>
              </li>
              <li class="item">
                <span class="tag notice">通知</span>
                <span class="text">
                  关于2023年公司新版规章制度，关于2023年公司新版规章制度，..
                </span>
                <span class="time">2024-01-10</span>
              </li>
            </ul>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div class="early-warning">
      <a-row :gutter="30">
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <a-card class="remind m-t-30" :bordered="false">
            <div slot="title" class="card-sub-title">
              提醒预警
              <a-badge count="6" />
            </div>
            <div class="count">您有
              <span class="number">6</span>
              条提醒预警待处理
            </div>
            <a-list
              :split="false"
              item-layout="horizontal"
              :data-source="data"
              class="remind-list"
            >
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta>
                  <a slot="title" href="https://www.antdv.com/">
                    <span class="tag">提醒</span>
                    {{ item.title }}
                  </a>
                  <a-avatar
                    slot="avatar"
                    src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                  />
                  <div class="description" slot="description">
                    <div class="department ellipsis">拟稿部门：华南区/杭州/人力资源部/人事科</div>
                    <div class="time">2016-06-16  14:03</div>
                  </div>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <div class="m-t-30">
            <div class="todo-list">
              <img src="~@/assets/lianan/dbsx.png" alt="待办事项">
            </div>
            <div class="content">
              <a-button type="primary" block>我的待办（100）</a-button>
              <a-button block>我的已办（99）</a-button>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import echartsView from '@/components/ECharts'
import { baseMixin } from '@/store/app-mixin'
import * as echarts from 'echarts'
import VueCountUp from 'vue-countupjs'
export default {
  mixins: [baseMixin],
  components: {
    echartsView,
    VueCountUp
  },
  data () {
    return {
      data: [
        {
          title: '关于2022年度 SHOP-公司A、B、C类员工绩效考核操作指南注意事项'
        },
        {
          title: '各行政出发及经济赔偿适用规则'
        },
        {
          title: '公司员工制度'
        },
        {
          title: '关于2022年度 SHOP-公司A、B、C类员工绩效考核操作指南注意事项'
        },
        {
          title: '关于2022年度 SHOP-公司A、B、C类员工绩效考核操作指南注意事项'
        },
        {
          title: '关于2022年度 SHOP-公司A、B、C类员工绩效考核操作指南注意事项'
        }
      ],
      option: {
        tooltip: {
          trigger: 'item',
          position: 'top',
          formatter: (params) => {
            return '<div style="width: 128px;">' +
              '<div style="display:flex;justify-content: space-between;margin-bottom: 10px;}">' +
                '<div style="color: #9EA5BD">成交数</div>' +
                '<div style="color:#FF7360">90.7%</div>' +
              '</div>' +
              '<div style="color: #333D5F;font-size: 24px;">' + params.value + '</div>' +
            '</div>'
          }
        },
        grid: {
          left: 10,
          right: 50,
          containLabel: true
        },
        textStyle: {
          fontFamily: 'alimama',
          fontWeight: 400,
          fontSize: 16
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#9EA5BD'
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#9EA5BD'
          },
          splitLine: {
            lineStyle: {
              color: '#DDE1EE'
            }
          }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            label: {
              show: false
            },
            itemStyle: {
              color: '#fff',
              borderWidth: 8,
              borderColor: '#A27DFF',
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 10
            },
            lineStyle: {
              color: '#A27DFF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(162, 125, 255, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(83, 97, 255, 0)'
                }
              ], false)
            }
          }
        ]
      },
      ordwerOption: {
        color: [
          'rgba(255, 255, 255, 1)',
          'rgba(94, 119, 255, 1)',
          'rgba(94, 119, 255, 0.35)',
          'rgba(94, 119, 255, 0.55)',
          'rgba(94, 119, 255, 0.74)'
        ],
        textStyle: {
          fontFamily: 'alimama',
          fontWeight: 400,
          fontSize: 16
        },
        tooltip: {
          trigger: 'item'
        },
        label: {
          show: true,
          formatter (param) {
            return param.value + '% ' + param.name
          }
        },
        series: [
          {
            name: '订单占比',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 19, name: '取消订单' },
              { value: 40, name: '交易完成' },
              { value: 19, name: '待付款' },
              { value: 21, name: '待发货' },
              { value: 19, name: '待收货' }
            ],
            labelLine: {
              lineStyle: {
                color: '#282D32'
              },
              length: 10,
              length2: 40
            },
            tooltip: {
              valueFormatter: (v) => v + '%'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              scaleSize: 30
            }
          }
        ]
      }
    }
  },
  mounted () {},
  methods: {}
}
</script>

<style lang="less" scoped>
  .analysis {
    .real-time {
      .head-title {
        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        margin-bottom: 15px;
      }
      .content {
        .wrapper {
          width: 100%;
          height: 202px;
          border-radius: 8px;
          color: #fff;
          .sub-title {
            height: 76px;
            padding: 16px 17px;
            border-bottom: 1px solid #DDE1EE;
            .image  {
              width: 48px;
              height: 48px;
              margin-right: 21px;
            }
            .text {
              font-size: 24px;
              font-weight: 400;
              vertical-align: middle;
            }
          }
          .number {
            height: 126px;
            padding: 39px 74px 39px 89px;
            font-size: 48px;
            line-height: 48px;
          }
        }
        .hits {
          background: linear-gradient(229deg, #736DFF, #A97FFF);
          position: relative;
          &::after {
            position: absolute;
            left: 88px;
            right: 88px;
            bottom: -15px;
            content: '';
            display: block;
            height: 20px;
            filter: blur(20px);
            background: linear-gradient(229deg, #5664FF, #A97FFF);
          }
        }
        .order {
          background: linear-gradient(229deg, #F7C598, #FF8886);;
          position: relative;
          &::after {
            position: absolute;
            left: 88px;
            right: 88px;
            bottom: -15px;
            content: '';
            display: block;
            height: 20px;
            filter: blur(20px);
            background: linear-gradient(229deg, #F7C598, #FF8886);
          }
        }
        .deal {
          background: linear-gradient(229deg, #9975DA, #F0AEBF);;
          position: relative;
          &::after {
            position: absolute;
            left: 88px;
            right: 88px;
            bottom: -15px;
            content: '';
            display: block;
            height: 20px;
            filter: blur(20px);
            background: linear-gradient(135deg, #F9B4BD, #9573DB);
          }
        }
      }
    }
    .transaction-statistics, .order-proportion, .early-warning {
      /deep/ .ant-card {
        border-radius: 12px;
      }
    }
    .transaction-statistics {
      .card-sub-title-wrapper {
        color: #9EA5BD;
        .day, .week, .month {
          cursor: pointer;
          margin-right: 6vw;
        }
      }
    }
    .order-proportion {
      /deep/ .ant-card-body {
        padding: 0px 44px 24px!important;
      }
      .message-list {
        display: block;
        height: 320px;
        overflow: hidden;
        .item {
          margin-bottom: 15px;
          .tag {
            display: inline-block;
            width: 42px;
            height: 20px;
            font-size: 14px;
            text-align: center;
            border-radius: 2px;
          }
          .text {
            font-size: 14px;
            font-weight: 500;
            margin-left: 21px;
            width: 50%;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
          }
          .time {
            float: right;
          }
        }
      }
    }
    .early-warning {
      .remind {
        .card-sub-title {
          /deep/ .ant-badge-count {
            min-width: 16px;
            height: 16px;
            padding: 0 2px;
            line-height: 16px;
            top: -6px;
            left: -2px;
          }
        }
        .count {
          background-image: url('~@/assets/lianan/yj.png');
          background-position: 0 0;
          background-size: 100% 100%;
          height: 80px;
          line-height: 80px;
          padding-left: 70px;
          .number {
            font-size: 24px;
          }
        }
      }
      .remind-list {
        width: 100%;
        .tag {
          display: inline-block;
          width: 46px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          color: #FF3838;
          font-size: 12px;
          background: rgba(255, 239, 240, 1);
        }
        .description {
          display: flex;
          justify-content: flex-start;
          .department {
            width: 50%;
          }
        }
      }
      .todo-list {
        img {
          width: 100%;
          height: 118px;
        }
      }
      .content {
        padding: 28px 35px;
        .ant-btn {
          margin-bottom: 20px;
        }
      }
    }
    // 卡片公共样式
    .card-sub-title {
      font-size: 20px;
      line-height: 24px;
      font-weight: 400;
    }
    .card-no-border {
      /deep/ .ant-card-head {
        border: none;
      }
      /deep/ .ant-card-body {
        padding: 0 24px 24px;
      }
    }
    .activity {
      color: #FF8D1A;
      background: rgba(255, 141, 26, 0.3);
    }
    .message {
      color: #00BAAD;
      background: rgba(0, 186, 173, 0.3);
    }
    .notice {
      color: #2A82E4;
      background: rgba(42, 130, 228, 0.7);
    }
    .ant-dropdown-link {
      color: #9EA5BD;
    }
    .m-t-30 {
      margin-top: 30px;
    }
    .m-b-30 {
      margin-bottom: 30px;
    }
  }
</style>
